<template>
  <div class="boss">
    <div class="d-flex mid-boss">
      <div class="title">
        <span>案例展示</span>
      </div>
      <p class="title2">让安全成为生活的习惯</p>
      <div class="d-flex list">
        <div class="item item1">
          <div class="img img-one">
            <img
              src="https://www.wzxfpx.com/wp-content/uploads/2024/04/wx.png"
              alt=""
            />
          </div>
          <div class="content">
            <h6 class="text-one">广东为众消防清明放假通知</h6>
            <p class="text-two">
              广东为众消防放假时间:4月4日(星期四)至4月6日(星期六)放假调休共3天
            </p>
          </div>
          <div class="bottom d-flex justify-content-between">
            <span>4月 3</span>
            <span>查看更多→</span>
          </div>
        </div>
        <div class="item item2">
          <div class="img img-two">
            <img
              src="https://www.wzxfpx.com/wp-content/uploads/2024/04/8405d538b5acf131c95fd67cc25f0a2a_3535509141c8426a2eecd858f7c66f51_640_wx_fmtpngfromappmsgtpwebpwxfrom5wx_lazy1wx_co1-1024x683-1.jpg"
              alt=""
            />
          </div>
          <div class="content">
            <h6 class="text-one">
              中国消防协会2024年第1期消防安全管理员职业技能认定督导员丶考评员培训圆满开班
            </h6>
            <p class="text-two">
              随着人们的生活步伐日益加快 各类建筑和设施层出 […]
            </p>
          </div>
          <div class="bottom d-flex justify-content-between">
            <span>4月 3</span>
            <span>查看更多→</span>
          </div>
        </div>
        <div class="item item3">
          <div class="img img-three">
            <img
              src="https://www.wzxfpx.com/wp-content/uploads/2024/04/54eee161a68e3d24d51a55fbbdff7fe2_fd816db2496ad7c98c5902a1fd05a0f2_640_wx_fmtjpegfromappmsgtpwebpwxfrom5wx_lazy1wx_co1-1024x343-1.jpg"
              alt=""
            />
          </div>
          <div class="content">
            <h6 class="text-one">
              广东省消防救援总队消防行业职业技能鉴定站2024年5月消防设施操作员职业技能鉴定公告
            </h6>
            <p class="text-two">
              根据消防行业职业技能鉴定指导中心2024年度消 […]
            </p>
          </div>
          <div class="bottom d-flex justify-content-between">
            <span>4月 2</span>
            <span>查看更多→</span>
          </div>
        </div>
        <div class="item item4">
          <div class="img img-three">
            <img
              src="https://www.wzxfpx.com/wp-content/uploads/2024/03/7250e876ae084dbf9f47c4c742763c2c.webp"
              alt=""
            />
          </div>
          <div class="content">
            <h6 class="text-one">
              关于第二次续增2024年4月批次消防设施操作员职业技能鉴定考试名额的公告
            </h6>
            <p class="text-two">
              根据消防行业职业技能鉴定指导中心2024年度消 […]
            </p>
          </div>
          <div class="bottom d-flex justify-content-between">
            <span>3月 22</span>
            <span>查看更多→</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.boss {
  height:auto
  /* margin: 70px 0; */
}
.mid-boss {
  justify-content: center;
  padding: 50px 0;
  flex-direction: column;
  text-align: center;
}
.title {
  font-size: 42px;
  margin-bottom: 20px;
}
.title2 {
  font-size: 20px;
  color: #46707f;
}
.list {
  align-items: flex-start;
  justify-content:center;
  margin-top:20px;
}
.item {
  border: 1px solid #ccc;
  width: 288px;
  margin: 0 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 2px #ccc;
}
.content {
  padding: 30px;
  text-align: left;
}
.bottom {
  padding: 0 30px 30px 30px;
  font-size: 12px;
}
.bottom span:nth-child(1) {
  color: #8f8c8c;
}
.bottom span:nth-child(2) {
  color: #23aae4;
}
.text-one {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  transition: all 0.5s;
  cursor: pointer;
}
.text-one:hover {
  color: #f79007;
}
.text-two {
  font-size: 12px;
  margin-bottom: 10px;
}
.text-one {
  margin-bottom: 30px;
}
.img {
  height: 165px;
  position: relative;
}
.img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
}
.img-one img {
  height: 80%;
}
.img-two img {
  width: 80%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.img-three img {
  height: 80%;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 1020px) {
  .list {
    flex-wrap: wrap;
    width: 750px;
    margin:10px auto;
   

  }
  .item {
    width: 348px;
  }
  .item3 {
    margin-top: -20px;
  }
  .item4 {
    margin-top: 20px;
  }
}
@media (max-width: 760px) {
  .boss{
    justify-content:none !important;
  }
  .list {
    width:auto;
    flex-direction: column;
  }
  .item {
    width: 348px; 
    margin: 20px 0;
    align-self: center;
  }
}
</style>
